<template>
    <div class="app-container">
        <el-form :model="queryParams" ref="elForm" size="medium" :inline="true" label-width="100px">
            <el-form-item label="设备mac地址" prop="devMac">
            <el-input v-model="queryParams.devMac" placeholder="请输入设备mac地址" show-word-limit clearable
                :style="{ width: '100%' }"></el-input>
            </el-form-item>
            <el-form-item label="路由地址" prop="routerMac">
                <el-input v-model="queryParams.routerMac" placeholder="请输入路由地址" show-word-limit clearable
                    :style="{ width: '100%' }"></el-input>
            </el-form-item>
            <el-form-item size="large">
                <el-button type="primary" @click="submitForm">查询</el-button>
                <el-button @click="resetForm">重置</el-button>
            </el-form-item>
        </el-form>
        <el-table :data="devLoginInfoList" stripe style="width: 100%">
            <el-table-column prop="id" label="日志编号" width="180" align="center">
            </el-table-column>
            <el-table-column prop="dvcId" label="设备Mac" width="180" align="center">
            </el-table-column>
            <el-table-column prop="dvcType" label="设备类型" align="center">
            </el-table-column>
            <el-table-column prop="routerMac" label="路由" align="center">
            </el-table-column>
            <el-table-column prop="devPowerId" label="上电ID" align="center">
            </el-table-column>
            <el-table-column prop="loginTime" label="登录时间" align="center">
            </el-table-column>
        </el-table>
        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize" @pagination="getDevLoginLog" />
    </div>
</template>
<script>
import { getDevLoginLog } from "@/api/alm/statistical-export/area-manage/area-manage";
import { getType } from "@/api/devTypeMap";

export default {
    data() {
        return {
            devLoginInfoList: [],
            // 总条数
            total: 0,
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                ipaddr: undefined,
                userName: undefined,
                status: undefined,
                devMac: undefined,
                routerMac: undefined
            },
            dateRange: []
        }
    },
    created() {
        this.getDevLoginLog();
    },
    deactivated() {
    },
    mounted() {
    },
    methods: {
        submitForm() {
            this.getDevLoginLog();
        },

        resetForm() {
            this.queryParams = {};
            this.queryParams.pageNum = 1;
            this.queryParams.pageSize = 10;
            this.dateRange = [];
            this.getDevLoginLog();
        },

        getDevLoginLog() {
            console.log(this.addDateRange(this.queryParams, this.dateRange));
            getDevLoginLog(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
                this.devLoginInfoList = response.rows;
                this.total = response.total;
                console.log('response ', response);
                this.devLoginInfoList.forEach(item => {
                    item.dvcType = getType(item.dvcType);
                    item.time = this.dateFormat(item.time);
                    item.loginTime = this.dateFormat(item.loginTime / 1000);
                });
            })
        },

        dateFormat(timeStamp) {
            // 创建一个新的Date对象，将时间戳作为参数传递给构造函数
            const date = new Date(timeStamp * 1000)
            // 获取年、月、日、小时和分钟
            const year = date.getFullYear()
            const month = String(date.getMonth() + 1).padStart(2, '0')
            const day = String(date.getDate()).padStart(2, '0')
            const hours = String(date.getHours()).padStart(2, '0')
            const minutes = String(date.getMinutes()).padStart(2, '0')
            const seconds = String(date.getSeconds()).padStart(2, '0')
            // 重新赋值格式化后的日期字符串
            return `${year}/${month}/${day} ${hours}:${minutes}:${seconds}`
        },
    }
};
</script>

<style scoped>
.main {
    width: 100%;
}
</style>